<template>
	<view class="recharge">
		<view v-if="listData.length == 0" style="padding-top: 60rpx">
			<u-empty mode="list" text="暂无到账记录"></u-empty>
		</view>
		<view class="list_box" v-if="listData.length > 0">
			<view class="list_head flex" v-for="(item, index) in listData" :key="index">
				<view class="img-box">
					<image class="w100 h100" :src="item.shop.avatar_url" mode=""></image>
				</view>
				<view class="data-box">
					<view class="flex justify-between">
						<view class="shopNameBlock">{{ item.shop.shopname }}</view>
						<view class="time">{{ get_datem(item.createtime) }}</view>
					</view>
					<view class="moneyBlockk" v-if="item.type === 1">
						<view class="label">{{ item.remark }}</view>
						<view class="moneyBlock">
							<view class="money">+{{ Number(item.all_money) }}</view>
							<button class="moneyNtn" v-if="item.status == 2" @click="handleShen(item)">申请立即到账</button>
							<button class="moneyNtn" v-else-if="item.status == 5">到账审核中</button>
						</view>
					</view>
					<view class="moneyBlockk" v-else>
						<view class="label">{{ item.remark }}</view>
						<view class="moneyBlock">
							<view class="money">+{{ Number(item.all_money) }}</view>
							<button class="moneyNtn" v-if="item.status == 2" @click="handleShen(item)">申请立即到账</button>
							<button class="moneyNtn" v-else-if="item.status == 5">到账审核中</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="centerShow" mode="center" @close="handleClose" :round="20">
			<view class="centerBlock">
				<view class="centerFont">将提交商家管理员审核，审核通过后，您购买的商品将不再支持7天无理由退货！您是否同意？</view>
				<view class="centerBtnBlcok">
					<view @click="handleClose">取消申请</view>
					<view @click="handleClickJ" style="color: #ebbe87">继续申请</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			shop_id: '',
			page: 1,
			last_page: 1,
			listData: [],
			recordId: '',
			centerShow: false
		};
	},
	onLoad(options) {
		this.shop_id = options.shop_id;
		this.getRechargeList();
	},
	onReachBottom() {
		this.page++;
		this.getRechargeList();
	},
	methods: {
		handleShen(item) {
			this.centerShow = true;
			this.recordId = item.id;
		},
		handleClose() {
			this.centerShow = false;
		},
		handleClickJ() {
			this.$request({
				url: 'manage/apply_chongzhi',
				method: 'POST',
				data: {
					records_id: this.recordId
				}
			}).then((res) => {
				this.centerShow = false;
				uni.showToast({
					icon: 'none',
					title: '操作成功'
				});
				this.getRechargeList();
			});
		},
		getRechargeList() {
			let that = this;
			if (this.page > this.last_page) return this.$wanlshop.msg('我是有底线的');
			uni.showLoading({
				title: '加载中'
			});
			this.$request({
				url: 'user/recharge_record',
				method: 'POST',
				data: { shop_id: this.shop_id }
			}).then((res) => {
				const { code, data, msg } = res.data;
				if (code == 1) {
					that.last_page = data.last_page;
					that.listData = [...that.listData, ...data.data];
				} else {
					uni.showToast({
						title: msg,
						icon: 'error'
					});
				}
				uni.hideLoading();
			});
		}
	}
};
</script>

<style scoped lang="scss">
.recharge {
	overflow: hidden;
	.list_box {
		margin-top: 52upx;

		.list_head {
			width: 686upx;
			border-bottom: 2upx solid #efefef;
			margin: 0 auto;
			padding-bottom: 34upx;
			margin-bottom: 32upx;
			&:last-child {
				border: 0;
			}

			.img-box {
				width: 96rpx;
				height: 96rpx;
				flex-shrink: 0;
				border-radius: 8rpx;
				margin-right: 20rpx;
				background-color: #d9d9d9;
			}

			.data-box {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.shopNameBlock {
					flex: 1;
					font-size: 28rpx;
				}
				.time {
					width: 220rpx;
					font-size: 26rpx;
					color: #999;
				}
				.moneyBlockk {
					justify-content: space-between;
					width: 100%;
					.label {
						padding: 0 12rpx;
						font-size: 20rpx;
						text-align: center;
						height: 36rpx;
						line-height: 36rpx;
						background: #ebbe87;
						border-radius: 80rpx;
						color: #fff;
					}
					.money {
						font-size: 32rpx;
						color: #333;
						font-weight: 500;
					}
				}
			}
		}
	}
}
.moneyNtn {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 16rpx;
	background: #ebbe87;
	height: 48rpx;
	font-size: 12px;
	color: #fff;
	border: none;
	margin-left: 20rpx;
}
.moneyBlock {
	display: flex;
	align-items: center;
}
.moneyBlockk {
	display: flex;
	align-items: center;
}
.centerBlock {
	width: 468rpx;
	height: 216rpx;
	padding: 40rpx;
	.centerFont {
		font-size: 14px;
		color: #333;
		line-height: 40rpx;
	}
	.centerBtnBlcok {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-top: 50rpx;
	}
}
.shopNameBlock {
	width: 320rpx;
	white-space: nowrap; /* 确保文本不会换行 */
	overflow: hidden; /* 超出容器部分的文本隐藏 */
	text-overflow: ellipsis; /* 使用省略号表示文本被截断 */
}
</style>
